<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: DoveXL
  Date: 2018/6/3
  Time: 20:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header"  content="${_csrf.headerName}"/>
    <title>小龙人后台管理平台</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/plugins/bootstrap/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="${pageContext.request.contextPath}/plugins/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="${pageContext.request.contextPath}/plugins/bootstrap/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <script src="${pageContext.request.contextPath}/plugins/jquery/jquery-3.2.1.min.js"></script>
    <!-- Bootstrap Js -->
    <script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap-paginator.js"></script>
    <script src="${pageContext.request.contextPath}/plugins/jquery/jquery.metisMenu.js"></script>
    <!-- Morris Chart Js -->
    <script src="${pageContext.request.contextPath}/plugins/morris/raphael-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/plugins/morris/morris.js"></script>
    <script src="${pageContext.request.contextPath}/plugins/bootstrap-datepicker-1.6.4-dist/js/bootstrap-datepicker.js"></script>
    <link href="${pageContext.request.contextPath}/plugins/bootstrap-datepicker-1.6.4-dist/css/bootstrap-datepicker3.standalone.css" title="" rel="stylesheet"/>
    <script src="${pageContext.request.contextPath}/plugins/bootstrap-datepicker-1.6.4-dist/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/plugins/bootstrap-datepicker-1.6.4-dist/locales/bootstrap-datepicker.zh-CN.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/plugins/jquery/custom-scripts.js"></script>
    <script src="${pageContext.request.contextPath}/scripts/volunteer/VolunteerSign.js"></script>

</head>
<body>
<nav class="navbar navbar-default top-navbar" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="${pageContext.request.contextPath}/index"><i class="fa fa-gear"></i> <strong>小龙人管理平台</strong></a>
    </div>
    <ul class="nav navbar-top-links navbar-right">
        <label style="font-size: larger;color: white">${UserInfo.user_name}!</label>
        <label style="font-size: larger;color: white">欢迎</label>
        <label style="font-size: larger;color: white">${UserInfo.user_realname}</label>
        <label style="font-size: larger;color: white">管理员登录</label>
        <!-- /.dropdown -->
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
            </a>
            <ul class="dropdown-menu dropdown-user">
                <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                </li>
                <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                </li>
                <li class="divider"></li>
                <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                </li>
            </ul>
            <!-- /.dropdown-user -->
        </li>
        <!-- /.dropdown -->
    </ul>
</nav>
<!--/. NAV TOP  -->
<nav class="navbar-default navbar-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav" id="main-menu">
            <li>
                <a href="${pageContext.request.contextPath}/index"><i class="fa fa-sitemap" ></i>后台首页<span class="fa arrow"></span></a>
            </li>
            <li>
                <a href="#"><i class="fa fa-sitemap" ></i>小龙人管理<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="${pageContext.request.contextPath}/volunteer/PersonInfo">基本信息</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/volunteer/BankInfo">银行账户</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/volunteer/VolunteerSign">志愿签到</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/volunteer/VolunteerInfo">志愿记录</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/volunteer/HonorInfo">荣誉信息</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href=""><i class="fa fa-sitemap"></i>统计报告<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="${pageContext.request.contextPath}/report/PersonStatistics">基本统计</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/report/TeamStatistics">团队统计</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/report/TimeStatistics">时间统计</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-sitemap" ></i>团队管理<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="${pageContext.request.contextPath}/team/TeamInfo">团队信息</a>
                    </li>
                </ul>
            </li>

            <li>
                <a href="#"><i class="fa fa-sitemap" ></i>系统管理<span class="fa arrow"></span></a>
               <sec:authorize access="hasRole('ROLE_SUPERADMIN')">
                <ul class="nav nav-second-level">
                    <li>
                        <a href="${pageContext.request.contextPath}/system/AdminInfo">用户管理</a>
                    </li>
                    <li>
                        <a href="${pageContext.request.contextPath}/system/DataBackup">数据备份</a>
                    </li>
                </ul>
               </sec:authorize>
            </li>
        </ul>
    </div>
</nav>
<div id="page-wrapper">
    <div id="page-inner">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h1 class="page-header">
                    小龙人管理 <small>在线签到</small>
                </h1>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background-color: white">
                <ul id="myTab" class="nav nav-tabs" style="margin-top: 2%">
                    <li class="active"><a href="#VolunteerSignTab" data-toggle="tab">
                        搜索签到</a></li>
                    <li><a href="#HistoricalSignTab" data-toggle="tab">历史签到</a></li>
                </ul>
                <div id="myTabContent" class="tab-content" style="margin-top: 1%">
                    <div class="tab-pane fade in active" id="VolunteerSignTab">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="form-inline" id="VolunteerSign" style="margin-top:1%;border-radius: 2%">
                                <div class="form-inline">
                                    <label class="control-label">单位：</label><input class="form-control" type="text" id="volunteerunit" style="width: 20%">
                                    <label  class="control-label" style="margin-left: 1%">姓名：</label>
                                    <input class="form-control" type="text" id="volunteername" style="width: 10%">
                                    <button type="button" class="btn btn-warning" style="width: 10%;margin-left: 2%" onclick="queryUserByCondition()">搜索</button>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                <table class="table table-hover">
                                    <caption style="align-content: center;font-size: larger;margin-top: 1%">搜索用户列表</caption>
                                    <thead >
                                    <tr style="align-content: center">
                                        <th>选择</th>
                                        <th>姓名</th>
                                        <th>身份证号</th>
                                    </tr>
                                    </thead>
                                    <tbody id="VolunteerSignInfo">
                                    </tbody>
                                </table>
                                <div id="UserExample" style="text-align: left"> <ul id="UserpageLimit"></ul> </div>
                        </div>
                        <br>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="form-inline" style=" margin-top: 2%">
                                <label class="control-label" >日期：</label>
                                <input type="text" style="width: 15%" class="form-control" id="datepicker" data-date-format="yyyy-mm-dd" readonly>
                                <label class="control-label" style="margin-left: 2%">时段：</label>
                                <label class="radio-inline">
                                    <input type="radio" name="TimeCategory"  value="9:00-11:30" checked onchange=""> 9:00-11:30
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="TimeCategory"  value="13:30-16:00" onchange=""> 13:30-16:00
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="TimeCategory"  value="9:00-16:00" onchange=""> 9:00-16:00
                                </label>
                                <button type="button" class="btn btn-primary" style="width: 10%;margin-left: 1%" id="BtnAddVolunteerSign" onclick="AddVolunteerSignFunction()">签到</button>
                                <button type="button" class="btn btn-primary" style="width: 10%;margin-left: 1%" onclick="">导入签到</button>
                            </div>
                         </div>
                        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10" >
                        <label style="margin-top: 5%;color: #00a2d4">当前签到用户----------------------------------</label>
                        </div>
                        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10" >
                            <table class="table table-hover">
                                <thead >
                                <tr style="align-content: center">
                                    <th>姓名</th>
                                    <th>身份证号</th>
                                    <th>状态</th>
                                </tr>
                                </thead>
                                <tbody id="VolunteerSignAlreadyInfo">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="HistoricalSignTab">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="form-inline" id="HistoricalVolunteerSign" style="margin-top:1%;border-radius: 2%">
                                <div class="form-inline">
                                    <label class="control-label">单位：</label><input class="form-control" type="text" id="Historicalvolunteerunit" style="width: 20%">
                                    <label  class="control-label" style="margin-left: 1%">姓名：</label>
                                    <input class="form-control" type="text" id="Historicalvolunteername" style="width: 10%">

                                </div>
                                <br>
                                <div class="form-inline">
                                    <label class="control-label">时段：</label>
                                    <label class="radio-inline">
                                        <input type="radio" name="TimeCategory1"  value="AllTimeSegment" checked onchange=""> 全部时段
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="TimeCategory1"  value="9:00-11:30" onchange=""> 9:00-11:30
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="TimeCategory1"  value="13:30-16:00" onchange=""> 13:30-16:00
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="TimeCategory1"  value="9:00-16:00" onchange=""> 9:00-16:00
                                    </label>
                                </div>
                                <br>
                                <div class="form-inline">
                                    <label class="control-label" >开始日期：</label>
                                    <input type="text" style="width: 15%" class="form-control" id="startdatepicker" data-date-format="yyyy-mm-dd" readonly>
                                    <label class="control-label" style="margin-left: 2%">结束日期：</label>
                                    <input type="text" style="width: 15%;" class="form-control" id="enddatepicker" data-date-format="yyyy-mm-dd" readonly>
                                    <button type="button" class="btn btn-primary" style="width: 5%;margin-left: 2%" onclick="queryVolunteerSignFunction()">搜索</button>
                                </div>
                            </div>
                            <table class="table table-hover">
                                <caption style="align-content: center;font-size: larger;margin-top: 1%">搜索用户列表</caption>
                                <thead >
                                <tr style="align-content: center">
                                    <th>选择</th>
                                    <th>姓名</th>
                                    <th>身份证号</th>
                                    <th>日期</th>
                                    <th>时段</th>
                                </tr>
                                </thead>
                                <tbody id="HistoricalVolunteerSignInfo">
                                </tbody>
                            </table>
                            <div id="HistoricalUserExample" style="text-align: left"> <ul id="HistoricalUserpageLimit"></ul> </div>
                            <div class="form-inline" style="margin-top: 2%;margin-bottom: 2%">
                            <button type="button" class="btn btn-info" id="ModifyDetailInfo" onclick="ShowChangeVolunteerSignModal()">修改信息</button>
                            <button type="button" class="btn btn-info" id="DeleteDetailInfo" onclick="ShowDeleteVolunteerSignModal()">删除用户</button>
                            <button type="button" class="btn btn-danger" id="ExportVolunteer" onclick="">导出名单</button>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
</div>
</div>

<div class="modal fade" id="ChangeVolunteerSignModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ChangeVolunteerSignLabel">修改签到信息</h4>
            </div>
            <div class="modal-body">
                <form role="form" id="ChangeVolunteerSignForm">
                    <div class="form-inline">
                        <label class="control-label">姓名：</label>
                        <label class="control-label" id = "OriginVolunteerName" ></label>
                    </div>
                    <br>
                    <div class="form-inline">
                        <label class="control-label">身份证号：</label>
                        <label class="control-label" id = "OriginVolunteerIDCardNumber" ></label>
                    </div>
                    <br>
                    <div class="form-inline">
                        <label class="control-label">签到日期：</label>
                        <input type="text" style="width: 30%" class="form-control" id="ChangeSigndatepicker" data-date-format="yyyy-mm-dd" readonly>
                    </div>
                    <br>
                    <div class="form-inline">
                        <label class="control-label">签到时段：</label>
                        <label class="radio-inline">
                            <input type="radio" name="TimeCategory2"  value="9:00-11:30" onchange=""> 9:00-11:30
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="TimeCategory2"  value="13:30-16:00" onchange=""> 13:30-16:00
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="TimeCategory2"  value="9:00-16:00" onchange=""> 9:00-16:00
                        </label>
                    </div>
                </form>
                <label class="control-label" id="ChangeVolunteerSignFlag" style="color: red"></label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="BtnChangeVolunteerSign" onclick="ChangeVolunteerSignFunction()">修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<div class="modal fade" id="DeleteVolunteerSignModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="DeleteVolunteerSignLabel">修改签到信息</h4>
            </div>
            <div class="modal-body">
                <form role="form" id="DeleteVolunteerSignForm">
                    <div class="form-inline">
                        <label class="control-label">姓名：</label>
                        <label class="control-label" id = "DeleteVolunteerName" ></label>
                    </div>
                    <br>
                    <div class="form-inline">
                        <label class="control-label">身份证号：</label>
                        <label class="control-label" id = "DeleteVolunteerIDCardNumber" ></label>
                    </div>
                    <br>
                    <div class="form-inline">
                        <label class="control-label">签到日期：</label>
                        <label class="control-label" id = "DeleteSignDate" ></label>
                    </div>
                    <br>
                    <div class="form-inline">
                        <label class="control-label">签到时段：</label>
                        <label class="control-label" id = "DeleteSignSegment" ></label>
                    </div>
                </form>
                <label class="control-label" id="DeleteVolunteerSignFlag" style="color: red"></label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="BtnDeleteVolunteerSign" onclick="DeleteVolunteerSignFunction()">修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>






</body>
</html>
